<template>
	<view class="my_address" :class="{have_or_not:addressList.length == 0}">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'我的地址',color:'#fff'}" />
		<!-- #endif -->
		<!-- <view class="not_address" v-if="addressList.length == 0 ">
			<view class="image_box">
				<image src="/static/images/my/not_address.png" mode=""></image>	
			</view>
			<view class="title">暂无地址</view>
		</view> -->
		<view v-show="addressList.length == 0" class="orders_listto">
			<image src="/static/images/orders/not.png" mode=""></image>
			<view class="">
				暂无地址 ~
			</view>
		</view>
		<!-- <view class="have_address" v-else>
			<view class="have_item" v-for="(item,index) in addressList" :key="index" @click="changeAddress(item)">
				<view class="top">
					
					<text>{{item.name}}</text>
					<text>{{item.phone}}</text>
				</view>
				<view style="display: flex;width: 68%;">
					<uni-icons type="location" size="20"></uni-icons>
					<view class="bottom">{{item.province+ item.city+ item.district + item.detail}}</view>
				</view>
				<view class="is_default" > 
					<radio-group name="" @change="radioChange">
						<label>
							<radio :checked="cureent == index" :value="String(item.id)" color="#24d576"/><text></text>
						</label>
					</radio-group>
					设为默认地址
				</view>
				<view class="remove" @click="remove(item)">
					<uni-icons type="close" size="30" color="#000000"></uni-icons>
				</view>
			</view>
			<view class="add_address" @click="addAddress">
				<text>添加地址</text>
				<uni-icons type="plusempty" size="22" color="#fff"></uni-icons>
			</view>
		</view> -->
		<view class="site">
			<view class="siteList" v-for="(item,index) in addressList" :key="index" >
				<view class="top">
					<view class="left">
						<view class="default" v-if="item.is_default == 1">
							默认
						</view>
						<view class="address" @click="changeAddress(item)">
							{{item.province+ item.city+ item.district + item.detail + item.house_number}}
						</view>
					</view>
					<view class="right" @click="editAddress(item)">
						<uni-icons type="compose" size="30" color="#a0a0a0"></uni-icons>
					</view>
				</view>
				<view class="bot">
					<view class="is_default" >
						<radio-group name="" @change="radioChange">
							<label>
								<radio :checked="cureent == index" :value="String(item.id)" color="#24d576"/><text></text>
							</label>
						</radio-group>
						设为默认地址
					</view>
					<text @click="remove(item)">删除</text>
				</view>
			</view>
			<view class="add_address" @click="addAddress">
				<text>添加地址</text>
				<uni-icons type="plusempty" size="16" bold color="#fff"></uni-icons>
			</view>
		</view>
	
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				cureent:0,
				addressList:[
					// {nickname:'昵称',tel:'15570786686',address:'湖南省长沙市岳麓区......'},
					// {nickname:'张三',tel:'188××××0000',address:'湖南省长沙市岳麓区......'},
				],   //地址列表
				is_change:false,  //是否是从别的页面跳转过来修改地址
			};
		},
		methods:{
			//添加地址
			addAddress(){
				let url = this.is_change ? '/pages/my/myAddress/addAddress?addType=pay_add' : '/pages/my/myAddress/addAddress'
				uni.navigateTo({
					url:url
				})
			},
			//修改地址
			editAddress(data){
				console.log(data,'-----------data')
				uni.navigateTo({
					url:'/pages/my/myAddress/addAddress?type=true&data='+JSON.stringify(data)
				})
			},
			//默认地址选中
			radioChange(e){
				console.log(e.detail.value)
				this.addressList.forEach((item,index)=>{
					if(item.id == e.detail.value){
						this.cureent = index;
						this.$http({
							url:`/api/address/set-default/${item.id}`,
							method:'post',
							success:result=>{
								if(result.code == 200){
									uni.hideToast()
									uni.showToast({
										title:result.msg,
										duration:2000,
										success:()=>{
											setTimeout(()=>{
												this.getAddressList()
											},1500)
										}
									})
								}
							}
						})
					}
				})
				
			},
			//获取地址列表
			getAddressList(){
				this.$http({
					url:'/api/address/list',
					method:'get',
					success:result=>{
						if(result.code ==  200){
							this.addressList = result.data.list
							console.log(this.addressList,'------------------this.addressList')
							this.addressList.forEach((item,index)=>{
								if(item.is_default == 1){
									this.cureent = index;
								}
							})
							if(result.data.list.length == 1 && result.data.list[0].is_default != 1){
								let data = result.data.list[0]
								data.is_default = 1
								this.$http({
									url:`/api/address/edit/${data.id}`,
									method:'post',
									data:data,
									success:result=>{
										// console.log(result,'')
									}
								})
							}
						}
					}
				})
			},
			//删除地址
			remove(data){
				console.log(data.id,'-----------------------id')
				uni.showModal({
					title:'您确定删除该地址吗',
					content:data.province+ data.city+ data.district + data.detail,
					success:(res)=>{
						console.log(res,'------------我是res')
						if (res.confirm) {
							this.$http({
								url:`/api/address/delete/${data.id}`,
								method:'post',
								success:result=>{
									if(result.code == 200){
										this.getAddressList()
									}
								}
							})
						} else if (res.cancel) {
						    console.log('用户点击取消');
						}
					}
				})
			},
			//选中修改地址
			changeAddress(data){
				if(!this.is_change){
					return false;
				}else{
					console.log(data,'------------------data')
					let pages = getCurrentPages()
					let nowPage =  pages[pages.length -1]
					let prevPage = pages[pages.length-2]
					prevPage.$vm.address = data
					uni.navigateBack({
						delta:1,
						animationType: 'pop-out',
						animationDuration: 200,
					})
				}
			}
		},
		onLoad(option) {
			console.log(option,'------------option')
			if(option.is_change){
				this.is_change = true
			}
		},
		onShow() {
			this.getAddressList()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.my_address{
		width: 100%;
		height: 100%;
		.not_address{
			width: 100%;
			// height: 100%;
			.image_box{
				width: 100%;
				height: 440px;
				padding: 50px 0;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				color: #4B4B4B;
				font-size: 20px;
				text-align: center;
				font-weight: 500;
			}
			
		}
	// 	.have_address{
	// 		width: 100%;
	// 		height: 100%;
	// 		.have_item{
	// 			margin: 15px 12px;
	// 			background-color: #fff;
	// 			border-radius: 8px;
	// 			box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
	// 			position: relative;
	// 			>view:first-child,view:nth-child(3){
	// 				padding: 15px 10px;
	// 			}
	// 			>view{
	// 				padding: 0 10px 15px 10px;
	// 			}
	// 			.top{
	// 				display: flex;
	// 				align-items:baseline;
	// 				>text{
	// 					margin-right: 10px;
	// 					font-size: 17px;
	// 				}
	// 				text:last-child{
	// 					font-size: 13px;
	// 				}
	// 			}
	// 			.bottom{
	// 				overflow: hidden;
	// 				text-overflow: ellipsis;
	// 				display: -webkit-box;
	// 				-webkit-line-clamp: 1;
	// 				-webkit-box-orient: vertical;
	// 				color: #404040;
	// 			}
	// 			.is_default{
	// 				position: absolute;
	// 				right: 10px;
	// 				top: 0px;
	// 				display: flex;
	// 				align-items: center;
	// 			}
	// 			.remove{
	// 				position: absolute;
	// 				bottom: 0px;
	// 				right: 30px;
					
	// 			}
	// 		}
	// 	}
		.site{
			.siteList{
				margin: 10px;
				background-color: #fff;
				padding: 10px;
				.top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						
						.default{
							background-color: #22c271;
							color: #fff;
							width: 40px;
							text-align: center;
							font-size: 10px;
							border-radius: 5px;
							margin-right: 10px;
							height: 20px;
							line-height: 20px;
						}
						.address{
							font-size: 13px;
							margin-right:10px;
						}
					}
					.right{
						
					}
				}
				.bot{
					margin-top: 20px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 12px;
					color: #868686;
					.is_default{
						display: flex;
						align-items: center;
					}
					>text{
						margin-right: 10px;
					}
				}
			}
		}
	}
	.add_address{
		margin: 0 9px;
		background-color: #24D576;
		height: 44px;
		line-height: 44px;
		color: #fff;
		font-size: 20px;
		font-weight:bold;
		text-align: center;
		border-radius:25px;
		margin-top: 35px;
		.uniui-plusempty{
		}
	}
	.have_or_not{
		background-color: #fff;
	}
	/deep/ uni-radio .uni-radio-input{
		width: 15px;
		height: 15px;
	}
	.orders_listto{
		font-size: 14px;
		text-align: center;
		color: #9e9e9e;
		>image{
			width: 200rpx;
			height: 200rpx;
			margin: 100rpx 0 40rpx 0;
		}
	}
</style>
